<template>
  <div class="header">
    <h1>游咪集市</h1>
    <van-search v-model="value" placeholder="搜索商品"></van-search>
  </div>
  <div class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img src="../../assets/img/banner1.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/banner2.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/banner3.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/banner4.png" alt=""
      /></van-swipe-item>
    </van-swipe>
  </div>
  <div class="nav">
    <ul>
      <li>
        <img src="../../assets/img/1807.png" alt="" />
        <span>同人周边</span>
      </li>
      <li>
        <img src="../../assets/img/1815.png" alt="" />
        <span>鞋包服饰</span>
      </li>
      <li>
        <img src="../../assets/img/1820.png" alt="" />
        <span>图书文具</span>
      </li>
      <li>
        <img src="../../assets/img/1827.png" alt="" />
        <span>潮玩</span>
      </li>
    </ul>
  </div>

  <div class="fixed-box">
    <van-tabs v-model:active="activeName" @click-tab="changeList">
      <van-tab title="今日上新" name="a"> </van-tab>
      <van-tab title="IP周边" name="b"></van-tab>
      <van-tab title="畅销书单" name="c"></van-tab>
    </van-tabs>
  </div>

  <div class="product">
    <ul class="clear-fix">
      <li v-for="item in product" :key="item.id" @click="goDetail(item.id)">
        <img :src="item.masterImg" alt="" />
        <div class="p-info">
          <p>{{ item.title }}</p>
          <span>{{ item.label }}</span>
          <div class="box">
            <div class="top">
              <i>￥</i>
              <b>{{ item.price }}</b>
            </div>
            <div class="bottom">
              <img src="../../assets/img/zan.png" alt="" />
              <em>{{ item.likes }}</em>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Search, Swipe, SwipeItem, Tab, Tabs } from "vant";

import { useRouter } from "vue-router";

import { ref } from "vue";
export default {
  components: {
    VanSearch: Search,
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem,
    VanTab: Tab,
    VanTabs: Tabs,
  },
  setup() {
    let value = ref("");
    const product = ref([]);

    const activeName = ref("a");

    const router = useRouter();

    const getData = function () {
      fetch("http://2107.wqdp.com.cn/index/market?count=15")
        .then((response) => response.json())
        .then((res) => {
          product.value = res.result;
        });
    };

    const changeList = function () {
      product.value.sort(() => {
        return Math.random() - 0.5;
      });
      console.log(product.value);
    };

    const goDetail = function (id) {
      router.push("/detail/" + id);
    };

    getData();

    return { value, activeName, product, changeList, goDetail };
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  h1 {
    background-color: white;
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
  }
}
.banner {
  margin-top: 100px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  img {
    display: block;
    width: 100%;
  }
}
.nav {
  ul {
    height: 90px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      img {
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
      }
      span {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}

.product {
  padding-top: 10px;
  ul {
    li {
      width: 174px;
      height: 283px;
      background-color: #fff;
      overflow: hidden;
      border-radius: 10px;
      float: left;
      margin: 5px 6px;
      img {
        display: block;
        width: 174px;
        height: 175px;
      }
      .p-info {
        padding: 10px;
        position: relative;
        p {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          width: 154px;
        }
        span {
          position: absolute;
          top: 50px;
          text-align: center;
          padding: 2px 5px;
          font-size: 10px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #f49553;
          background-color: #f4965348;
          border-radius: 5px;
        }
        .box {
          margin: 35px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          > div {
            float: left;
            display: flex;
            align-items: center;
          }
          i {
            font-size: 7px;
            color: #f04a3a;
          }
          b {
            font-size: 21px;
            color: #f04a3a;
          }
          img {
            width: 10px;
            height: 10px;
            margin-right: 10px;
          }
          em {
            font-size: 10px;
            font-family: Helvetica;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
}

.fixed-box {
  width: 100%;
  background: #fff;
  position: sticky;
  top: 99px;
  left: 0;
  margin-top: 10px;
  z-index: 1;
}
</style>
